<template>
	<view>
		<u-navbar leftIcon="" :title="$t('pages.yyyp')" placeholder>
			<view class="flexright xiaohui" slot="right"
				@click="onLocaleChange()">{{$t('language.yuyan')}}</view>
		</u-navbar>
		<view class="mainpadding_top ffffff">
			<view class="searchbox flexcenter" @click="jumpurl('/pages/index/sousuo')">
				<u-icon name="search" color="#333" size="20"></u-icon>
				<view class="main_size xiaohei">{{$t("index.spss")}}</view>
			</view>
		</view>
		<u-swiper :list="indexAll.banner" @click="lbtclick" keyName="url" height="200px" radius="0"></u-swiper>
		<view class="ffffff">
			<view class="flexleft flex_wrap">
				<view class="flexcolumn margin_top" v-for="item in indexAll.channel" :key="item.id" style="width: 20%;"
					@click="jumpsplb(item)">
					<image class="jgqimg" :src="item.iconUrl" mode=""></image>
					<view class="xiaohei strongtext margin_top2">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="banner sanshier xiaohei bold textcenter margin_top" style="background-color: #dcf4ff;">
			{{$t("index.mzppg")}}</view>
		<view class="mainpadding2">
			<image :src="item.picUrl" class="homeimgbox margin_top radius" v-for="(item,index) in indexAll.brandList"
				mode="" @click="jumpdetail('/pages/index/pingpaishangxq?id=',item.id)"></image>
		</view>
		<view class="banner sanshier xiaohei bold textcenter margin_top" style="background-color: #dcf4ff;">
			{{$t("index.ztjx")}}</view>
		<scroll-view scroll-x="true">
			<view class="flexleft margin_top">
				<view class="" style="margin-left: 30rpx;" v-for="item in indexAll.topicList" :key="item.id"
					@click="jumpdetail('/pages/index/zhuantixq?id=',item.id)">
					<image :src="item.picUrl" class="ztjxtp" mode=""></image>
					<view class="flexleft margin_top">
						<text class="xiaohei yhxk titletext bold" style="width: 300rpx;">{{item.title}}</text>
						<text class="xiaojin titletext bold">￥{{item.price}}{{$t("index.yq")}}</text>
					</view>
					<view class="margin_top xiaohui strongtext">{{item.subtitle}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="banner sanshier xiaohei bold textcenter margin_top" style="background-color: #dcf4ff;">
			{{$t("index.hwtj")}}</view>
		<view class="mainpadding2">
			<view class="flexbetween flex_wrap ">
				<view class="spbox margin_top" v-for="item in indexAll.hotGoodsList"
					@click="jumpdetail('/pages/index/shangpinxq?id=',item.id)">
					<image class="sptp" :src="item.picUrl" mode=""></image>
					<view class="" style="padding: 30rpx 15rpx;">
						<view class="ershiba xiaohei xiankuan textcenter">{{item.name}}</view>
						<view class="strongtext xiaojin textcenter margin_top">￥{{item.counterPrice}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				indexAll: {},
				applicationLocale: ""
			}
		},
		onLoad() {
			this.init()
			if (uni.getStorageSync("UNI_LOCALE")) {
				this.applicationLocale = uni.getStorageSync("UNI_LOCALE")
			} else {
				this.applicationLocale = "zh-Hans"
				uni.setStorageSync("UNI_LOCALE", "zh-Hans")
			}
			console.log(this.applicationLocale);
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.zh-hans'),
						code: 'zh-Hans'
					},
					{
						text: this.$t('locale.kk_KZ'),
						code: 'kk_KZ'
					},
				]
			}
		},
		methods: {
			onLocaleChange() {
				let code = this.applicationLocale == 'zh-Hans' ? "kk_KZ" : "zh-Hans"
				uni.setLocale(code);
				this.$i18n.locale = code;
			},
			init() {
				httpRequest.request('/wx/home/index', 'GET', {

				}).then(res => {
					this.indexAll = res.data
				})
			},
			lbtclick(e) {
				console.log(e, 999);
				this.jumpdetail('/pages/index/zhuantixq?id=', this.indexAll.banner[e].id)
			},
			jumpsplb(item) {
				uni.navigateTo({
					url: "/pages/index/shangpinlb?name=" + item.name + "&id=" + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchbox {
		background-color: #ededed;
		padding: 15rpx 0;
		border-radius: 5rpx;
	}

	.ztjxtp {
		width: 680rpx;
		height: 380rpx;
		border-radius: 30rpx;
	}

	.homeimgbox {
		width: 100%;
		height: 250rpx;
	}

	.banner {
		padding: 50rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.jgqimg {
		width: 90rpx;
		height: 90rpx;
	}

	.spbox {
		width: 48%;
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.sptp {
		width: 338rpx;
		height: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
	}
</style>